<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="/images/icon.jpg">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-2.1.4.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/item.css">

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/index.html" class="navbar-brand logo">
                <img src="/images/icon.jpg" width="50px" alt="">
            </a>
            <a class="navbar-brand" href="/index.html">
                <span>义启行</span>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/index.html">首页<span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/discussion.html">讨论</a></li>
                <li class="publish"><a href="/publish.html">分享</a></li>
                <li><a href="/recruit.html" class="recruitTab" style="display: none;">发布招募</a></li>
                <li class="authTab"><a href="/login.html">登录</a></li>
                <li class="authTab"><a href="/register.html">注册</a></li>
                <li class="dropdown user" style="display: none">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <span>
                            <span>
                                <img class="avatarUrl img-circle" src="/images/adorable.jpg" alt="">
                            </span>
                            <span class="nickname"></span>
                        </span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <input type="hidden" value="-1" class="role">
                        <li><a href="/personal.html">个人信息</a></li>
                        <li><a href="/replies.html">回复我的</a></li>
                        <li><a href="/signupInfo.html">报名信息</a></li>
                        <li><a href="/logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="page-header">
                <h1>
                    <span class="hostelName">东北饺子馆</span>
                    <input type="hidden" value="-1" class="hostelId">
                    <small class="location">广东省广州市</small>
                    <p class="pull-right"><span class="readCount glyphicon glyphicon-eye-open">100</span></p>
                </h1>
            </div>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="imgUrl media-object" src="/images/c1.webp" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">简介</h4>
                    <p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis consequatur debitis dignissimos ea et exercitationem, harum ipsam iure laboriosam officia quaerat quam quidem recusandae veritatis! Commodi esse ipsa modi.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row">
        <div class="col-md-2"> </div>
        <div class="col-md-8">
<!--            <div class="panel panel-primary">-->
<!--                <div class="panel-heading">-->
<!--                    <h3 class="panel-title">青旅介绍：</h3>-->
<!--                </div>-->
<!--                <div class="panel-body">-->
<!--                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, at consequuntur dolore eum ex fugiat, inventore iste, mollitia nostrum omnis optio pariatur qui quibusdam repudiandae suscipit tempore velit veniam voluptatem?-->
<!--                </div>-->
<!--            </div>-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">义工要求</h3>
                </div>
                <div class="panel-body">
                    <p class="requirement">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda blanditiis commodi enim error et, eveniet, harum hic iusto modi possimus qui quidem quis repellat saepe! Assumenda eveniet laboriosam voluptatem?</p>
                    <p>招募人数：<span class="numberOfPeople">10</span></p>
                    <p>开始时间：<span class="startTime">2020-04-11</span></p>
                    <p>结束时间：<span class="endTime">3</span></p>
                </div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">工作内容</h3>
                </div>
                <div class="panel-body">
                    <p class="workContent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet expedita explicabo fuga iusto nam nisi tempora voluptatum? Accusamus dicta dolor est id illum in nostrum omnis ratione veritatis.
                    </p>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">其他信息</h3>
                </div>
                <div class="panel-body">
                    <p class="additionalInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consectetur iste itaque iure magnam, maiores minima mollitia, non, obcaecati perspiciatis quam recusandae voluptatibus voluptatum! Ab alias dolore dolorem facere modi.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="col-md-6">
                <div class="btn btn-success pull-left signup">我要报名</div>
            </div>
            <div class="col-md-6">
                <div class="btn btn-warning pull-right">咨询店家</div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>
</body>
<script src="/js/item.js"></script>
<script>
    let itemId = location.href.split("/");
    itemId = itemId[itemId.length-1];
    $.ajax({
        url:"/item/"+itemId,
        type:"POST",
        dataType:"json",
        contentType:"application/json;charset=utf-8",
        success:function (response) {
            console.log(response);
            appendingItem(response.data);
        },
        error:function (error) {
            console.log(error);
        }
    });
</script>
<script src="/js/common.js"></script>
<script>authenticate()</script>
<script>

    $(".signup").click(function () {
        $.ajax({
            url:"/item/signup",
            type:"POST",
            dataType: "json",
            contentType:"application/json;charset=UTF-8",
            data:JSON.stringify({
                "itemId":itemId,
                "hostelId":$(".hostelId").val()
            }),
            success:function (response) {
                if(response.code===200){
                    alert("报名成功！！");
                }else if(response.code===-1){
                    alert("已经报名过了！！");
                }
                console.log(response);
            },
            error:function(error){
                console.log(error);
                location.href="/login";
            }
        });
    });
</script>
</html>